CSS @media 媒體查詢 ( Media Queries )

Media features provide more specific details to media queries, by allowing to test for a specific feature of the user agent or display device. For example, you can apply styles to only those screens that are greater, or smaller, than a certain width.

The @media CSS at-rule can be used to apply part of a style sheet based on the result of one or more media queries. With it, you specify a media query and a block of CSS to apply to the document if and only if the media query matches the device on which t

如果要在不同解析度的螢幕上瀏覽同一個網頁，常常會透過 CSS 的方式製作 RWD 響應式網頁，而 CSS 的 @media 媒體查詢可以定義判斷不同媒體的條件，只要符合條件，就會替這種媒體套用對應的 CSS 樣式屬性，這篇教學會介紹 CSS @media 媒體查詢 ( Media Queries ) 的相關 ...

@media 规则在媒体查询中用于为不同的媒体类型/设备应用不同的样式。 方向（手机或平板电脑处于横屏还是竖屏模式？ 使用媒体查询是一种流行的技术，用于向台式机、笔记本电脑、平板电脑和手机提供定制的样式表（响应式网页设计）。 您还可以使用媒体查询来规定某些样式仅适用于打印的文档或屏幕阅读器（mediatype：print、screen 或 speech）。 除了媒体类型之外，还有媒体特性。 媒体特性通过允许测试用户代理或显示设备的具体特性，为媒体查询提供了更多特定细节。 例如，您可以将样式仅应用于大于或小

@media 規則，在 CSS2 中引入，使得可以為不同的媒體型別定義不同的樣式規則。 CSS3 中的媒體查詢擴充套件了 CSS2 的媒體型別概念：它不是查詢裝置型別，而是查詢裝置的功能。

The CSS @media at-rule lets us target browsers by certain characteristics, features, and user preferences, then apply styles or run other code based on those things.

CSS 中的 @media 屬性，提供了一種強大的方式，來針對不同的設備和螢幕尺寸，設計和應用樣式。 這篇文章將介紹 @media 是什麼，以及如何使用它來創建響應式網站。